<template>
  <!-- 维保管理--维保项目管理-->
  <div class="content-area">
    <!-- 位置模块 -->
    <HeadTop></HeadTop>
    <div class="search-area">
      <div class="search-content">
        <div class="search-item">
          <span>维保类型:</span>
          <el-select v-model="searchData.typeId" clearable>
            <el-option v-for="(item,index) in maintainTypeArr" :key="item.id" :label="item.name"
                       :value="item.id"></el-option>
          </el-select>
        </div>
      </div>
      <div class="search-footer">
        <button class="search-btn" @click="lookupByConditions">查询</button>
      </div>
    </div>
    <!--内容-->
    <div class="main-content">
      <div class="content-info" style="width: 100%">
        <!--表格数据与翻页合并模块-->
        <DataTable :childLoad="parentLoad" :dataTableObj="dataTableObj" v-on:getPageNo="searchByPageNo"  v-on:handlePageReload="pageReload"
                   v-on:getPageSize="searchByPageSize" v-on:selectChange="checkChange">
          <!--除查询外的操作-->
          <div slot="operate">
            <div class="some-operate">
              <button class="some-btn some-btn-add" v-if="pagePower['004003001']"
                      @click="$goRoute( '/manage/maintainMgr/maintainProjectMgr/addProject?type=add');">添加
              </button>
              <button class="some-btn some-btn-delete" v-if="pagePower['004003003']" @click="delProjects">批量删除</button>
            </div>
          </div>
          <!-- 额外的操作以及其他因素 -->
          <el-table-column type="selection" width="55" fixed="left" v-if="pagePower['004003003']"></el-table-column>
          <!--维保要求超出长度 出现悬浮框-->
          <el-table-column fixed="right" align="center" label="项目要求" width="520">
            <template slot-scope="scope">
              <template v-if="scope.row.requiresShow">
                <el-popover ref="popover" placement="top" width="560" popper-class="el_pop standardPopo" trigger="hover"
                            :content="scope.row.requires"></el-popover>
                <div v-popover:popover>
                  <div class="item-names over-pop">{{scope.row.requires}}</div>
                </div>
              </template>
              <template v-else>
                <div class="item-names">{{scope.row.requires}}</div>
              </template>
            </template>
          </el-table-column>
          <el-table-column fixed="right" align="center" label="添加时间" width="150">
            <template slot-scope="scope">
              <div class="item-names">{{scope.row.createDate}}</div>
            </template>
          </el-table-column>
          <el-table-column fixed="right" align="center" label="操作" width="150"
                           v-if="pagePower['004003002'] || pagePower['004003003']">
            <template slot-scope="scope">
              <div class="item-route">
                <div class="item-route-link" v-if="pagePower['004003002']"
                     @click="$goRoute( '/manage/maintainMgr/maintainProjectMgr/editProject?type=edit&id='+ scope.row.id);">
                  编辑
                </div>
                <div class="item-route-link" v-if="pagePower['004003003']"
                     @click="delProjects(scope.row.id, scope.row.index)">删除
                </div>
              </div>
            </template>
          </el-table-column>
        </DataTable>
      </div>
    </div>
  </div>
</template>
<script>
  import com from "../../../js/common"
  import DataTable from "../../../components/dataTable/dataTable"
  import moment from 'moment'
  import HeadTop from "../../../components/head-top/head-top"
  import {getMaintainProject, getMaintainType, maintainItemDel} from '@/api/getData'

  export default {
    name: 'maintainProject',
    components: {
      DataTable,
      HeadTop
    },
    data() {
      return {
        parentLoad: '加载中...',    // 加载状态
        pagePower: JSON.parse(com.getStore('pagePowers'))['004003'] ? JSON.parse(com.getStore('pagePowers'))['004003'] : {},
        // 搜索数据
        searchData: {
          typeId: ''
        },
        maintainTypeArr: [],
        //子页面信息
        childLink: [
          {
            route: '',
            text: '编辑',
          }
        ],

        // 表格组件数据
        dataTableObj: {
          tableData: [],
          tableColumns: [
            {
              text: '序号',
              width: '40',
              attributeName: 'index'
            }, {
              text: '维保类型',
              width: '80',
              attributeName: 'typeName'
            },
            {
              text: '维保项目',
              width: '240',
              attributeName: 'item'
            }
          ],
          // 翻页的数据
          pageObj: {
            // 每页分为几条数据
            pageSize: 10,
            // 总共多少数据
            pageNum: 0,
            pageNo: 1,
            searchStatus: 2
          },
          checkIds: [],
        },
      }
    },

    mounted() {
      // 获取当前页面所需数据
      this.getMaintainProjectData();
      this.getMaintainTypeData();
    },

    methods: {
      // 获取页面所需数据
      getMaintainProjectData(obj) {
        this.dataTableObj.pageObj.searchStatus = 2
        this.dataTableObj.tableData = []
        getMaintainProject({
          pageNo: this.dataTableObj.pageObj.pageNo,
          pageSize: this.dataTableObj.pageObj.pageSize,
          condition: this.searchData
        }).then((data) => {
          this.dataTableObj.pageObj.searchStatus = 1
          let itemList = data.data.data.data;
          if (itemList.length > 0) {
            let startPage = (this.dataTableObj.pageObj.pageNo - 1) * this.dataTableObj.pageObj.pageSize;
            itemList.forEach(function (i, e) {
              i.index = startPage + e + 1;
              i.requiresShow = i.requires.length > 44;
              i.createDate = i.createDate ? com.formatDate(i.createDate).substring(0, 10) : i.createDate;
            })
            this.dataTableObj.tableData = itemList;
          } else {
            this.parentLoad = '暂无数据'    // loading(暂无数据)
          }
          this.dataTableObj.pageObj.pageNum = data.data.data.totalRecord;
        }).catch((data) => {
          this.parentLoad = data.data.message    // loading(查询失败)
          this.dataTableObj.pageObj.searchStatus = 0
        })
      },

      // 获取当前页面所需维保类型数据
      getMaintainTypeData() {
        getMaintainType({}).then((data) => {
          let info = data.data.data;
          let maintainTypeArr = [];
          maintainTypeArr.push({'name': '全部', 'id': ''});
          info.forEach(function (i, e) {
            if (e < 4) {
              maintainTypeArr.push({'name': i.name, 'id': i.id})
            }
          })
          this.maintainTypeArr = maintainTypeArr;
        }).catch((err) => {
          this.parentLoad = data.data.message    // loading(查询失败)
          this.$message.error('查询维保类型数据失败');
        })
      },

      // 每页多少内容
      searchByPageSize(val) {
        this.dataTableObj.pageObj.pageSize = val;
        this.getMaintainProjectData()
      },

      // 切换第几页
      searchByPageNo(val) {
        this.dataTableObj.pageObj.pageNo = val;
        this.getMaintainProjectData()
      },

      // 表格选框勾选
      checkChange(val) {
        let checkIds = [];
        val.forEach(function (i) {
          checkIds.push(i.id);
        })
        this.dataTableObj.checkIds = checkIds;
      },

      // 批量删除
      delProjects(res) {
        let idArr = [];
        if (typeof res == 'number') {
          idArr[0] = res
        } else {
          idArr = this.dataTableObj.checkIds
        }
        if (idArr.length <= 0) {
          this.$message.warning('请至少选择一条数据进行操作');
        } else {
          this.$confirm('确定要删除吗?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            maintainItemDel(idArr).then((res) => {
              this.getMaintainProjectData()
            }).catch((err) => {
              this.$message.error('操作失败');
            })
          }).catch(_ => {});
        }
      },

      // 按查询条件查找
      lookupByConditions: function () {
        this.getMaintainProjectData();
      },

      // 页面刷新
      pageReload(){
        this.getMaintainProjectData();
      }
    },
  }
</script>
<style lang="scss" type="text/scss">
  @import "../../../style/entry/components/pageCommon";
</style>
